<template>
  <view class="login">
    <view class="col1">
      <image class="logo" src="@/static/images/logo.png" />
    </view>
    <view>
      <label @click="checkedSwitch" class="col2">
        <checkbox :checked="checked" color="#F9B44A" style="transform:scale(0.7)" value="cb" />已阅读并同意
        <view @click.stop="pushAgreement">《法律条款及隐私政策》</view>
      </label>
    </view>
    <button
      :disabled="!checked"
      :style="login_btn"
      @getuserinfo="wxGetUserinfo"
      open-type="getUserInfo"
      class="col3"
    >
      <image src="@/static/images/wechat.png" />微信用户一键登录
    </button>
    <!-- <view class="col4"
    @click="pushPhone">输入手机号码登录/注册</view>-->
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "login",
  data () {
    return {
      checked: true
    };
  },
  onShow () {
    console.log("on show");
  },
  computed: {
    ...mapGetters(["userID"]),
    login_btn () {
      return this.checked ? "background: #1AAC19" : "background: #ABABAB";
    },
  },
  methods: {
    wxGetUserinfo (e) {
      const wxUserInfo = e.detail.userInfo
      console.log(wxUserInfo);
      const userInfo = {
        OptIDList: "AddMember",
        MemberID: this.userID,
        MemberName: wxUserInfo.nickName,
        AvatarUrl: wxUserInfo.avatarUrl,
        MemberPhone: ''
      }
      this.$store.dispatch("AddUser", userInfo).then((res) => {
        console.log(res);
        this.$store.dispatch("GetUserInfo", this.userID)
        uni.reLaunch({
          url: '/pages/index/index'
        })
      })
    },
    checkedSwitch () {
      this.checked = !this.checked;
    },
    pushPhone () {
      uni.navigateTo({
        url: "/pages/mine/loginPhone",
      });
    },
    pushAgreement () {
      uni.navigateTo({ url: "/pages/mine/agreement" });
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background: #f5f6f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  .col1 {
    display: flex;
    align-items: flex-end;
    margin-top: 145rpx;
    .logo {
      width: 105rpx;
      height: 105rpx;
    }
  }
  .col2 {
    display: flex;
    align-items: center;
    color: #ababab;
    font-size: 28rpx;
    margin-top: 70rpx;
    view {
      color: #f5b85a;
    }
  }
  .col3 {
    width: 692rpx;
    height: 97rpx;
    margin-top: 50rpx;
    border-radius: 5rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: #fefefe;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
  .col4 {
    font-size: 28rpx;
    color: #ababab;
    line-height: 100rpx;
  }
}
</style
>>
